<template>
  <div>
    <div style="margin-bottom: 16px; font-weight: bold;">在线状态</div>
    <div ref="onlineStatusChartRef" style="width: 100%; height: 220px;"></div>
    <div style="margin: 24px 0 8px 0; font-weight: bold;">NAT</div>
    <div ref="natTypeChartRef" style="width: 100%; height: 260px;"></div>

    <!-- 丢包率图表 -->
    <div style="margin: 32px 0 8px 0; font-weight: bold;">丢包率 (%)</div>
    <div ref="lossRateChartRef" style="width: 100%; height: 260px;"></div>
    <!-- 时延图表 -->
    <div style="margin: 32px 0 8px 0; font-weight: bold;">时延 (ms)</div>
    <div ref="delayChartRef" style="width: 100%; height: 260px;"></div>
  </div>
</template>

<script setup name="QualityNetworkCharts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  formDrawer: {
    type: Object,
    required: true
  }
})

const onlineStatusChartRef = ref(null)
let onlineStatusChartInstance = null
const natTypeChartRef = ref(null)
let natTypeChartInstance = null
const lossRateChartRef = ref(null)
let lossRateChartInstance = null
const delayChartRef = ref(null)
let delayChartInstance = null

// 通用x轴时间
const timeArr = Array.from({ length: 30 }, (_, i) => {
  const h = String(Math.floor(i * 9 / 30)).padStart(2, '0')
  const m = String(Math.floor((i * 9 * 60 / 30) % 60)).padStart(2, '0')
  return `${h}:${m}`
})

// 在线状态图表配置
const onlineStatusOption = {
  tooltip: { trigger: 'axis' },
  legend: { data: ['在线状态'], top: 10, right: 40 },
  grid: { left: 60, right: 40, top: 40, bottom: 40 },
  xAxis: {
    type: 'category',
    data: timeArr,
    axisLabel: { color: '#888' }
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 1,
    interval: 1,
    axisLabel: {
      formatter: v => v === 1 ? '在线' : '',
      color: '#888'
    },
    splitLine: { show: false }
  },
  series: [
    {
      name: '在线状态',
      type: 'line',
      data: Array(timeArr.length).fill(1),
      showSymbol: false,
      lineStyle: { color: '#5B8FF9', width: 2 }
    }
  ]
}

// NAT类型图表配置
const natTypeMap = [
  '未知', '对称型', '端口限制型', 'IP限制型', '全锥型', '映射公网', 'DMZ公网', '卓越公网'
]
const natTypeOption = {
  tooltip: { trigger: 'axis' },
  legend: { data: ['NAT类型'], top: 10, right: 40 },
  grid: { left: 80, right: 40, top: 40, bottom: 40 },
  xAxis: {
    type: 'category',
    data: timeArr,
    axisLabel: { color: '#888' }
  },
  yAxis: {
    type: 'category',
    data: natTypeMap,
    axisLabel: { color: '#888' }
  },
  series: [
    {
      name: 'NAT类型',
      type: 'line',
      data: (() => {
        // 绝大部分为"全锥型"，偶尔有异常
        const arr = Array(timeArr.length).fill(4)
        arr[15] = 0 // 某一时刻异常
        return arr
      })(),
      showSymbol: true,
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: { color: '#5B8FF9', width: 2 },
      itemStyle: {
        color: d => d.dataIndex === 15 ? '#f00' : '#5B8FF9'
      },
      label: {
        show: true,
        position: 'right',
        formatter: (params) => params.dataIndex === timeArr.length - 1 ? '全锥型' : '',
        color: '#f00'
      }
    }
  ]
}

// 丢包率图表配置
const lossRateData = Array.from({ length: timeArr.length }, () => Math.round(Math.random() * 25))
const lossRateOption = {
  tooltip: { trigger: 'axis' },
  legend: { data: ['丢包率'], top: 10, right: 40 },
  grid: { left: 60, right: 40, top: 40, bottom: 40 },
  xAxis: {
    type: 'category',
    data: timeArr,
    axisLabel: { color: '#888' }
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 100,
    axisLabel: { color: '#888', formatter: '{value}' },
    name: '丢包率 (%)',
    nameTextStyle: { align: 'center', padding: [0, 0, 0, 0] }
  },
  series: [
    {
      name: '丢包率',
      type: 'line',
      data: lossRateData,
      showSymbol: false,
      smooth: false,
      lineStyle: { color: '#5B8FF9', width: 2 }
    },
    // 红色警戒线
    {
      name: '警戒线',
      type: 'line',
      data: Array(timeArr.length).fill(10),
      showSymbol: false,
      lineStyle: { color: '#f00', width: 2, type: 'dashed' },
      markPoint: {
        data: [
          {
            coord: [timeArr[timeArr.length - 1], 10],
            value: '10%',
            itemStyle: { color: '#f00' },
            label: { color: '#f00', fontWeight: 'bold', fontSize: 14, position: 'right' }
          }
        ]
      },
      tooltip: { show: false }
    }
  ]
}

// 时延图表配置
const delayData = Array.from({ length: timeArr.length }, () => Math.round(Math.random() * 10 + 15))
const delayOption = {
  tooltip: { trigger: 'axis' },
  legend: { data: ['时延'], top: 10, right: 40 },
  grid: { left: 60, right: 40, top: 40, bottom: 40 },
  xAxis: {
    type: 'category',
    data: timeArr,
    axisLabel: { color: '#888' }
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 30,
    axisLabel: { color: '#888', formatter: '{value}' },
    name: '时延 (ms)',
    nameTextStyle: { align: 'center', padding: [0, 0, 0, 0] }
  },
  series: [
    {
      name: '时延',
      type: 'line',
      data: delayData,
      showSymbol: false,
      smooth: false,
      lineStyle: { color: '#5B8FF9', width: 2 }
    }
  ]
}

function initOnlineStatusChart() {
  if (onlineStatusChartRef.value) {
    onlineStatusChartInstance = echarts.init(onlineStatusChartRef.value)
    onlineStatusChartInstance.setOption(onlineStatusOption)
    window.addEventListener('resize', resizeOnlineStatusChart)
  }
}
function disposeOnlineStatusChart() {
  window.removeEventListener('resize', resizeOnlineStatusChart)
  if (onlineStatusChartInstance) {
    onlineStatusChartInstance.dispose()
    onlineStatusChartInstance = null
  }
}
function resizeOnlineStatusChart() {
  onlineStatusChartInstance && onlineStatusChartInstance.resize()
}

function initNatTypeChart() {
  if (natTypeChartRef.value) {
    natTypeChartInstance = echarts.init(natTypeChartRef.value)
    natTypeChartInstance.setOption(natTypeOption)
    window.addEventListener('resize', resizeNatTypeChart)
  }
}
function disposeNatTypeChart() {
  window.removeEventListener('resize', resizeNatTypeChart)
  if (natTypeChartInstance) {
    natTypeChartInstance.dispose()
    natTypeChartInstance = null
  }
}
function resizeNatTypeChart() {
  natTypeChartInstance && natTypeChartInstance.resize()
}

function initLossRateChart() {
  if (lossRateChartRef.value) {
    lossRateChartInstance = echarts.init(lossRateChartRef.value)
    lossRateChartInstance.setOption(lossRateOption)
    window.addEventListener('resize', resizeLossRateChart)
  }
}
function disposeLossRateChart() {
  window.removeEventListener('resize', resizeLossRateChart)
  if (lossRateChartInstance) {
    lossRateChartInstance.dispose()
    lossRateChartInstance = null
  }
}
function resizeLossRateChart() {
  lossRateChartInstance && lossRateChartInstance.resize()
}

function initDelayChart() {
  if (delayChartRef.value) {
    delayChartInstance = echarts.init(delayChartRef.value)
    delayChartInstance.setOption(delayOption)
    window.addEventListener('resize', resizeDelayChart)
  }
}
function disposeDelayChart() {
  window.removeEventListener('resize', resizeDelayChart)
  if (delayChartInstance) {
    delayChartInstance.dispose()
    delayChartInstance = null
  }
}
function resizeDelayChart() {
  delayChartInstance && delayChartInstance.resize()
}

onMounted(() => {
  nextTick(() => {
    initOnlineStatusChart()
    initNatTypeChart()
    initLossRateChart()
    initDelayChart()
  })
})
onBeforeUnmount(() => {
  disposeOnlineStatusChart()
  disposeNatTypeChart()
  disposeLossRateChart()
  disposeDelayChart()
})
</script> 